<template>
	<div class="search-box">
		<form class="row">
			<div class="mb-3 col-auto">
				<input type="text" class="form-control" :placeholder="$t('name')">
			</div>

			<div class="col-auto">
				<button class="btn btn-success" @click="search">
					{{ $t('search') }}
				</button>
			</div>
		</form>
	</div>


	<ul class="tabs group-tabs">
		<li class="tab group-tab" v-for="tab in tabs" :class="tab.class" @click="changeTo(tab)">
			{{ $t(tab.name) }}
		</li>
	</ul>


	<div class="tab-content">
		<RouterView></RouterView>
		<!-- <component :is="comp" :join="join" :to-group-page="toGroupPage" /> -->
	</div>
</template>

<script type="module">
import { GroupService, UniqueSelector } from '@/common/common.object';

const tabs = [
	{
		id: "all",
		name: "all_group",
		// class: "active",
		target: '/groups',
	},
	{
		id: "creation",
		name: "my_creation",
		target: '/groups/creation',
	},
	{
		id: "joined",
		name: "my_joined",
		target: '/groups/joined',
	},
];


const DEFAULT_COMPONENT = "all";
let component = location.href.substring(location.href.lastIndexOf("/") + 1);
if (!tabs.map(item => item.id).includes(component)) component = DEFAULT_COMPONENT;

const selecter = UniqueSelector.byList(tabs, "id", component);

export default {
	data() {
		return {
			tabs: tabs,
		};
	},
	provide() {
		return {
			"toGroupPage": this.toGroupPage,
			"join": this.join,
			"exit": this.exit,
		};
	},
	created() {
		this.swichTab(component);
	},
	methods: {
		changeTo(item) {
			this.swichTab(item.id);

			this.$toPage(item.target);
		},
		swichTab(id) {
			if (selecter.avaliable(id)) {
				let oldActiveItem = selecter.reselect(id);
				if (oldActiveItem) oldActiveItem.class = null;

				selecter.value().class = "active";
			}
		},
		search() {
			// todo
		},
		toGroupPage(groupId, onNewPage = false) {
			this.$toPage(GroupService.getUrl(groupId), onNewPage);
		},
		join(groupId, groupName, onNewPage = false) {
			event.stopPropagation();
			this.$toPage(GroupService.joinUrl(groupId, groupName), onNewPage);
		},
		exit(groupId) {
			console.log('exit group: ', groupId);

		},
	}
}
</script>

<style scope>
.tabs {
	padding-left: 0;
}

table>thead>tr>th {
	border-top: none !important;
}

table>tbody>tr {
	cursor: pointer;
}

table>tbody>tr>td {
	vertical-align: middle !important;
}


.search-box {
	margin-bottom: 16px;
}


.tab-content {
	padding-top: 16px;
}
</style>
